<template>
	<view class="contnet">
		<view class="top-title">
			{{viewTitle.title}}
		</view>
		<view class="message-box" v-for="(item1,i) in data" :key="i">
			<view class="message-title">
				{{item1.name}}
			</view>
			<view class="message-box-content" v-for="(item2,i2) in item1.xiangqing" :key="i2">
				<view class="sheshi-box" v-for="(item3,i3) in item2.fuwu_name" :key="i3">
					<view class="img-box">
						<image class='img' v-if='item3.tupian' :src="base64Img(item3.tupian)" mode="" @click="gotoImg(item3.tupian)"></image>
					</view>
					<view class="sheshi-title">
						{{item3.fuwu_name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getChanguanSheshi
	} from '@/api/api.js'

	import {
		reactive,
		ref
	} from "vue"

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		base64Img
	} from '@/tools/tools.js'


	const data = ref([])
	const viewTitle = ref({})

	const getSheshi = (id) => {
		getChanguanSheshi(id).then((res2) => {
			console.log(res2);
			data.value = res2.result
			uni.hideLoading();
		})
	}

	const gotoImg = (res) => {
		uni.navigateTo({
			url:`/component/imgYulan?id=${res}`
		})
	}

	onLoad((res) => {
		console.log(res);
		viewTitle.value = res
		getSheshi(res.id)

		uni.showLoading({
			title: '加载中'
		});

	})
</script>

<style lang="scss" scoped>
	.contnet {
		padding: 20rpx;
		min-height: 100vh;
		background: linear-gradient(to bottom, rgba(135, 213, 255, 1) 0%, rgba(211, 211, 211, 0.58) 42%, rgba(211, 211, 211, 0) 100%);

		.top-title {
			padding: 20rpx;
			background-color: white;
			text-align: center;
			border-radius: 20rpx;
		}

		.message-box {
			margin-top: 20rpx;
			padding: 20rpx;
			background-color: white;
			border-radius: 20rpx;

			.message-title {
				text-align: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid gainsboro;
			}

			.message-box-content {
				padding-top: 20rpx;
				.sheshi-box {
					text-align: center;
					.img-box {
						.img {
							width: calc(100vw - 100rpx);
						}
					}
				}
			}
		}

	}
</style>